<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<!--


 * Drop-down menu v0.0.0
 * author janus.
 * mail：1287940664@qq.com
 * Date:February 12, 2009
 
                               Your comments and suggestions are my motivation.Give me mail.
 
 
 -->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>优雅灰色下拉菜单</title>
<style type="text/css">
body{
	background:#666;
	width:960px; 
	margin:0 auto;
	text-align:center;
	clear:both;
	border-radius:-4px;
		}
.menu{
	width:960px;
	height:30px;
	margin:0px; 
	padding:0px;
	float:left;
	   }
.menu  li{
	width:90px; 
	height:30px;
	float:left;
	margin:0px 5px;
	padding:0x; 
	display:inline;
	   }
.menu  li a{
	width:90px;
	height:30px; 
	font-size:20px; 
	font-weight:bold;
	float:left; 
	margin:0px;
	padding:5px; 
	background:#333;
	color:#CCC; 
	text-decoration:none;
	border-left:#69C thin solid;
		 }
.menu li a:hover{
	width:90px; 
	height:30px; 
	font-size:20px;
	font-weight:bold;
	float:left; 
	margin:0px;
	padding:5px; 
	background:#333; 
	color:#CCC; 
	text-decoration: underline;
	background:#000;
	   }
.sub_o1{
	float:left; 
	margin:0px;
	padding:0px; 
	width:90px;  
	display:none;
	list-style:none;
		}
.sub_o1 li {
	float:left;
	width:90px;
	height:30px;
	margin:0 0 5px 0;
	padding:0px; 
	border-bottom:#F60 thin solid;
		 }
.sub_o1 li a{
	float:left; 
	width:90px;
	height:30px;
	margin:0px; 
	padding:5px; 
	font-size:20px;
	font-weight:bold;color:#FFF;
		 }
.sub_o1 li a span{
	font-weight: bolder; 
	color:#F60;
	}
.sub_o1 li a:hover{
	float:left;
	width:90px;
	height:30px;
	margin:0px;
	padding:5px; 
	background:#69C; 
	font-size:20px;
	font-weight:bold;
	background:#069;
	color:#FFF;
			 }


</style>
<script  language="javascript" type="text/javascript" src="jquery-1.5.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
	$("li.sub1").mousemove(function(){
		$(this).find("ul").slideDown();		//you can give it a speed
		});
	$("li.sub1").mouseleave(function(){
		$(this).find("ul").slideUp();        //you can give it a speed
		});
	});

</script>
</head>

<body>
<h4>Drop-down menu</h4>
<p>Your comments and suggestions are my motivation.</p>

<ul  class="menu">
<li class="sub1"><a href="#" title="HOME">HOME</a></li>
<li class="sub1"><a href="#">item o2</a>
    <ul class="sub_o1">
            <li><a href="#">itemoo1</a></li>
            <li><a href="#">itemoo2</a></li>
            <li><a href="#">itemoo3</a></li>
            <li><a href="#">itemoo4</a></li>
            <li><a href="#">itemoo5</a></li>
            <li><a href="#">itemoo6</a></li>
        </ul>
</li>
<li class="sub1"><a href="#">item o3</a>
    <ul class="sub_o1">
            <li><a href="#">itemoo1</a></li>
            <li><a href="#">itemoo2</a></li>
            <li><a href="#">itemoo3</a></li>
            <li><a href="#">itemoo4</a></li>
            <li><a href="#">itemoo5</a></li>
            <li><a href="#">itemoo6</a></li>
        </ul>
</li>
<li class="sub1"><a href="#">item o4</a>
    <ul class="sub_o1">
            <li><a href="#">itemoo1</a></li>
            <li><a href="#">itemoo2</a></li>
            <li><a href="#">itemoo3</a></li>
            <li><a href="#">itemoo4</a></li>
            <li><a href="#">itemoo5</a></li>
            <li><a href="#">itemoo6</a></li>
        </ul>
</li>
<li class="sub1"><a href="#">item o5</a>
    <ul class="sub_o1">
            <li><a href="#">itemoo1</a></li>
            <li><a href="#">itemoo2</a></li>
            <li><a href="#">itemoo3</a></li>
            <li><a href="#">itemoo4</a></li>
            <li><a href="#">itemoo5</a></li>
            <li><a href="#">itemoo6</a></li>
        </ul>
</li>
<li class="sub1"><a href="#">item o6</a>
    <ul class="sub_o1">
            <li><a href="#">itemoo1</a></li>
            <li><a href="#">itemoo2</a></li>
            <li><a href="#">itemoo3</a></li>
            <li><a href="#">itemoo4</a></li>
            <li><a href="#">itemoo5</a></li>
            <li><a href="#">itemoo6</a></li>
        </ul>
</li>
<li class="sub1"><a href="#">item o7</a>
    <ul class="sub_o1">
            <li><a href="#">itemoo1</a></li>
            <li><a href="#">itemoo2</a></li>
            <li><a href="#">itemoo3</a></li>
            <li><a href="#">itemoo4</a></li>
            <li><a href="#">itemoo5</a></li>
            <li><a href="#">itemoo6</a></li>
        </ul>
</li>
<li class="sub1"><a href="#">item o8</a>
    <ul class="sub_o1">
            <li><a href="#">itemoo1</a></li>
            <li><a href="#">itemoo2</a></li>
            <li><a href="#">itemoo3</a></li>
            <li><a href="#">itemoo4</a></li>
            <li><a href="#">itemoo5</a></li>
            <li><a href="#">itemoo6</a></li>
        </ul>
</li>
<li class="sub1"><a href="#">item o9</a>
    <ul class="sub_o1">
            <li><a href="#">itemoo1</a></li>
            <li><a href="#">itemoo2</a></li>
            <li><a href="#">itemoo3</a></li>
            <li><a href="#">itemoo4</a></li>
            <li><a href="#">itemoo5</a></li>
            <li><a href="#">itemoo6</a></li>
        </ul>
</li>
</ul>
</body>
</html>
